<template>
  <div>
    <!-- <music-item :num="num"></music-item> -->
    <button ref="btn" @click="add">{{ num }}</button>
  </div>
</template>

<script>
// import MusicItem from "../components/MusicItem.vue";
/* 响应式的数据,操作数据 */
export default {
  data() {
    return {
      num: 1,
    };
  },
  methods: {
    add() {
      this.num++;
    },
  },
  beforeCreate() {
    console.log("A:" + "beforeCreate");
  },
  created() {
    console.log("A:" + "created");
  },
  beforeMount() {
    console.log("A:" + "beforeMount");
  },
  mounted() {
    console.log("A:" + "mounted");
  },
  beforeUnmount() {
    console.log("A:销毁之前");
  },
  unmounted() {
    console.log("A:销毁");
  },
  activated() {
    console.log("组件活动");
  },
  deactivated() {
    console.log("组件不活动");
  },
};
/* A切换到B页面  B页面和A页面生命周期触发的顺序 */
/* B页面切回A页面  生命周期的顺序 */
</script>

<style scoped></style>
